<template>
  <el-form
    :inline="true"
    :model="formInline"
    style="margin-top: 40px; margin-left: 40px"
    class="demo-form-inline"
  >
    <el-form-item label="Name:">
      <el-input v-model="formInline.name" placeholder="input name" clearable />
    </el-form-item>
    <el-form-item label="studentId:">
      <el-input
        v-model="formInline.studentId"
        placeholder="input studentId"
        clearable
      />
    </el-form-item>
    <el-form-item label="class:">
      <el-select
        v-model="formInline.class"
        placeholder="select class"
        clearable
      >
        <el-option label="Environmental Engineering Class 1" value="1" />
        <el-option label="Environmental Engineering Class 2" value="2" />
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="Date: ">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="onSubmit"> Query</el-button>
    </el-form-item>
  </el-form>
  <el-table
    :data="tableData"
    stripe
    head-align="center"
    :cell-style="{ textAlign: 'center' }"
    :header-cell-style="{ 'text-align': 'center' }"
    height="520"
    style="margin-left: 20px; width: calc(100% - 40px)"
  >
    <!-- <el-table-column
      v-for="(column, index) in columns"
      :prop="column.prop"
      :label="column.prop"
      :key="index"
      width="auto"
    >
    </el-table-column> -->
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="studentId" label="studentId" width="150" />
    <el-table-column prop="class" label="Class" width="240" />
    <el-table-column prop="major" label="Major" width="200" />
    <el-table-column prop="department" label="Department" width="240" />
    <el-table-column prop="testPaperName" label="Test Paper Name" width="200" />
    <el-table-column prop="score" label="Score" width="80" />
    <el-table-column
      prop="ifPass"
      label="IfPass"
      width="80"
      fixed="right"
      :formatter="ifPassFormatter"
    >
      <template #default="scope">
        <el-button :class="scope.row.ifPass == '1' ? 'pass' : 'noPass'">
          {{ scope.row.ifPass == "1" ? "Yes" : "No" }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="accidentEverOccurred"
      label="AccidentEverOccurred"
      width="164"
      fixed="right"
      :formatter="accidentEverOccurredFormatter"
    >
      <template #default="scope">
        <!-- <el-button
          :class="
            scope.row.accidentEverOccurred == '1' ? 'occurred' : 'noOccurred'
          "
          @click="showAccidents"
        >
          {{ scope.row.accidentEverOccurred == "1" ? "Yes" : "No" }}
        </el-button> -->
        <div style="text-align: center">
          <AccidentModel
            :accidentEverOccurred="scope.row.accidentEverOccurred"
          />
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts" name="SecurityLearning">
import { ref, reactive } from "vue";
import AccidentModel from "./AccidentModel.vue";

let isShowAccidentModel = ref(false);
const formInline = reactive({
  name: "",
  studentId: "",
  class: "",
});

const onSubmit = () => {
  console.log("submit!");
};

let tableData = [
  {
    name: "2004",
    studentId: "1.15",
    class: "Environmental Engineering Class 1",
    major: "Environmental Engineering",
    department: "School of Architecture and Engineering",
    university: "DDD",
    testPaperName: "chemical experiment",
    score: 99,
    ifPass: "1",
    accidentEverOccurred: "0",
  },
  {
    name: "2004",
    studentId: "1.15",
    class: "Environmental Engineering Class 1",
    major: "Environmental Engineering",
    department: "School of Architecture and Engineering",
    university: "DDD",
    testPaperName: "chemical experiment",
    score: 99,
    ifPass: "0",
    accidentEverOccurred: "1",
  },
  {
    name: "2004",
    studentId: "1.15",
    class: "Environmental Engineering Class 1",
    major: "Environmental Engineering",
    department: "School of Architecture and Engineering",
    university: "DDD",
    testPaperName: "chemical experiment",
    score: 99,
    ifPass: "1",
    accidentEverOccurred: "1",
  },
  {
    name: "2004",
    studentId: "1.15",
    class: "Environmental Engineering Class 1",
    major: "Environmental Engineering",
    department: "School of Architecture and Engineering",
    university: "DDD",
    testPaperName: "chemical experiment",
    score: 99,
    ifPass: "0",
    accidentEverOccurred: "0",
  },
];
const columns = Object.keys(tableData[0]).map((key) => ({
  prop: key,
  label: key.charAt(0).toUpperCase() + key.slice(1),
  width: 100,
}));

function ifPassFormatter(row: any, column: any, cellValue: string) {
  if (cellValue == "1") {
    return "Yes";
  } else if (cellValue == "0") {
    return "No";
  }
}
function accidentEverOccurredFormatter(
  row: any,
  column: any,
  cellValue: string
) {
  if (cellValue == "1") {
    return "Yes";
  } else if (cellValue == "0") {
    return "No";
  }
}
function showAccidents() {
  isShowAccidentModel.value = !isShowAccidentModel;
  console.log(isShowAccidentModel, "@@");
}
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 280px;
}
.demo-form-inline .el-select {
  --el-select-width: 280px;
}
.pass,
.occurred {
  text-decoration: underline;
  background-color: #70c546;
  border-style: solid;
  border-radius: 5px;
  /* border-width: 3px; */
  border-color: #70c546;
}
.noPass,
.noOccurred {
  background-color: #f56c6c;
  border-style: solid;
  border-radius: 5px;
  border-width: 4px;
  border-color: #f56c6c;
}
.modal {
  width: 200px;
  height: 150px;
  background-color: skyblue;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 0 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 20px;
  margin-left: -100px;
}
</style>
